
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
  <head>
    <% String path=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; %>
    <base href="<%=path%>">
    <title>员工管理系统</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    <script src="bootstrap-3.3.7/js/jquery-3.5.1.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="js/my.js"></script>
    <script>
        // 修改头像数据回显
        function updateImp(obj, imagePath) {
            var tr=$(obj).parent().parent();
            let id=tr.children().eq(0).text();
            let name=tr.children().eq(2).text();
            //2. 将以上数据动态的填充到模态框中
            $('#image-id').val(id);
            $('#image-name').val(name);
            $('#showbox').html("<img src='"+imagePath+"' width='100px' class='img-circle'>");
            //3. 将模态框显示出来
            $('#editImgModal').modal("show");
        }

    </script>
  </head>
  <body>
  <%--核心展示区--%>
  <div class="container">
    <h1 class="text-center">蜗牛员工管理系统</h1>

    <%--工具栏--%>
    <div class="row" style="margin: 20px 0px">
      <div class="col-md-10 col-md-offset-1 text-center">
        <form action="" method="" class="form-inline">
          编号：<input type="text" class="form-control" size="5" name="id">
          工号：<input type="text" class="form-control" size="5" name="tno">
          姓名：<input type="text" class="form-control" size="5" name="ename">
          职位：<input type="text" class="form-control" size="5" name="title">
          资薪：<input type="text" class="form-control" size="5" name="salary">
          <button type="submit" class="btn btn-primary">
            <span class="glyphicon glyphicon-search"></span> 查询
          </button>
        </form>
      </div>

      <div class="col-md-12 text-right">
        <button class="btn btn-success" data-toggle="modal" data-target="#addModal">
          <span class="glyphicon glyphicon-plus"></span> 新增员工
        </button>
        <a href="export" class="btn btn-warning">
          <span class="glyphicon glyphicon-download"></span> 导出数据</a>
      </div>
    </div>

    <%--表格数据展示--%>
    <div class="row">
      <div class="col-md-12">
        <table class="table-bordered table-hover text-center" style="line-height: 60px;width: 100%">
          <tbody>
          <tr style="font-weight: bold">
            <td>员工编号</td>
            <td>工号</td>
            <td>员工姓名</td>
            <td>员工性别</td>
            <td>员工头像</td>
            <td>员工生日</td>
            <td>员工职位</td>
            <td>员工薪资</td>
            <td>领导代号</td>
            <td>部门代号</td>
            <td>操作</td>
          </tr>
          <c:forEach var="emp" items="${info.list}">
            <tr>
              <td>${emp.id}</td>
              <td>${emp.tno}</td>
              <td>${emp.name}</td>
              <td>${emp.gender}</td>
              <td>
                <img src="${emp.image}" class="img-circle" style="width: 50px">
              </td>
              <td>
                <fmt:formatDate value="${emp.birthday}" pattern="yyyy-MM-dd"/>
              </td>
              <td>${emp.title}</td>
              <td>${emp.salary}</td>
              <td>${empty emp.managerId?"BOSS":emp.managerId}</td>
              <td>${empty emp.deptId?"轮岗":emp.deptId}</td>
              <td>
                <button type="button" class="btn btn-success" onclick="updateImp(this,'${emp.image}')">
                  <span class="glyphicon glyphicon-user"></span> 修改头像
                </button>
                <button type="button" class="btn btn-info updateitem" onclick="updateitem(this)">
                  <span class="glyphicon glyphicon-edit"></span> 编辑
                </button>
                <button type="button" class="btn btn-danger" onclick="editremove(${emp.id})">
                  <span class="glyphicon glyphicon-remove"></span> 删除
                </button>
              </td>
            </tr>
          </c:forEach>
          </tbody>
        </table>
      </div>
    </div>

    <%--分页导航--%>
    <div class="row text-center">
      <ul class="pagination">
        <%--上一页--%>
        <c:if test="${info.pageNum == 1}">
          <li><a href="onePage?currentPage=${info.pages}&id=${emp.id}&tno=${emp.tno}&ename=${emp.name}&title=${emp.title}&salary=${emp.salary}" disabled>&laquo;</a></li>
        </c:if>
        <c:if test="${info.pageNum != 1}">
          <li><a href="onePage?currentPage=${info.pageNum-1}&id=${emp.id}&tno=${emp.tno}&ename=${emp.name}&title=${emp.title}&salary=${emp.salary}">&laquo;</a></li>
        </c:if>
          <%--中间页--%>
        <c:forEach var="page" begin="1" end="${info.pages}">
          <%--判断当前页是否是点击的这一页--%>
          <c:if test="${page == info.pageNum}">
            <li class="active"><a href="javascript:;">${page}</a></li>
          </c:if>
          <c:if test="${page != info.pageNum}">
            <li><a href="onePage?currentPage=${page}&id=${emp.id}&tno=${emp.tno}&ename=${emp.name}&title=${emp.title}&salary=${emp.salary}">${page}</a></li>
          </c:if>
        </c:forEach>
        <%--下一页--%>
          <c:if test="${info.pageNum == info.pages}">
            <li><a href="onePage?currentPage=1&id=${emp.id}&tno=${emp.tno}&ename=${emp.name}&title=${emp.title}&salary=${emp.salary}" disabled>&raquo;</a></li>
          </c:if>
          <c:if test="${info.pageNum != info.pages}">
            <li><a href="onePage?currentPage=${info.pageNum+1}&id=${emp.id}&tno=${emp.tno}&ename=${emp.name}&title=${emp.title}&salary=${emp.salary}">&raquo;</a></li>
          </c:if>
      </ul>
    </div>
  </div>

  <%--新增员工的模态框--%>
  <div class="modal fade" tabindex="-1" role="dialog" id="addModal">
    <div class="modal-dialog" role="document" style="width: 520px;">
      <div class="modal-content">
        <div class="modal-header" style="background:#499ced; color: #fff">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h3 class="modal-title text-center">新增员工</h3>
        </div>
        <div class="modal-body">
          <form action="addEmp" method="post" class="form-horizontal">
            <div class="form-group">
              <label for="add-tno" class="col-sm-2 control-label">工号</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="add-tno" name="tno" placeholder="WNSHXXXX" required pattern="WNSH[0-9]{4}" title="工号格式不正确">
              </div>
            </div>
            <div class="form-group">
              <label for="add-ename" class="col-sm-2 control-label">姓名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="add-ename" name="ename" required pattern="[\u2e80-\u9fff]+" title="名字不正确">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">性别</label>
              <div class="col-sm-10">
                <div class="radio-inline">
                  <label>
                    <input type="radio" name="gender" value="男" checked> 男
                  </label>
                </div>
                <div class="radio-inline">
                  <label>
                    <input type="radio" name="gender" value="女"> 女
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="add-birthday" class="col-sm-2 control-label">生日</label>
              <div class="col-sm-10">
                <input type="date" class="form-control" id="add-birthday" name="birthday" required>
              </div>
            </div>
            <div class="form-group">
              <label for="add-title" class="col-sm-2 control-label">职位</label>
              <div class="col-sm-10">
                <select name="title" id="add-title" class="form-control" required>
                  <option value="CEO">CEO</option>
                  <option value="总经理">总经理</option>
                  <option value="副总经理">副总经理</option>
                  <option value="前端开发">前端开发</option>
                  <option value="后端开发">后端开发</option>
                  <option value="测试">测试</option>
                  <option value="市场">市场</option>
                  <option value="运营">运营</option>
                  <option value="DBA">DBA</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="add-salary" class="col-sm-2 control-label">薪资</label>
              <div class="col-sm-10">
                <input type="number" class="form-control" id="add-salary" name="salary" required>
              </div>
            </div>
            <div class="form-group">
              <label for="add-managerId" class="col-sm-2 control-label">领导代号</label>
              <div class="col-sm-10">
                <select name="managerId" id="add-managerId" class="form-control" required>
                  <option value="1">曹老板</option>
                  <option value="2">王五</option>
                  <option value="4">张丹</option>
                  <option value="5">张无忌</option>
                  <option value="21">武则天</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="add-deptId" class="col-sm-2 control-label">部门代号</label>
              <div class="col-sm-10">
                <select name="deptId" id="add-deptId" class="form-control" required>
                  <option value="1">综合管理</option>
                  <option value="2">销售部</option>
                  <option value="3">文艺部</option>
                  <option value="4">研发部</option>
                  <option value="5">市场部</option>
                  <option value="7">维护部</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-6">
                <button type="submit" class="btn btn-primary btn-block">确认添加</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <%--编辑员工的模态框--%>
  <div class="modal fade" tabindex="-1" role="dialog" id="editModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header" style="background:#499ced; color: #fff">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h3 class="modal-title text-center">编辑员工</h3>
        </div>
        <div class="modal-body">
          <form action="updateEmp" method="post" class="form-horizontal">
            <input type="hidden" name="id" id="edit-id"><!--隐藏域-->
            <div class="form-group">
              <label for="edit-tno" class="col-sm-2 control-label">工号</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="edit-tno" name="tno" placeholder="WNSHXXXX" required pattern="WNSH\d{4}" title="工号格式不正确">
              </div>
            </div>
            <div class="form-group">
              <label for="edit-ename" class="col-sm-2 control-label">姓名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="edit-ename" name="ename" readonly>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">性别</label>
              <div class="col-sm-10">
                  <input type="text" id="edit-gender" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group">
              <label for="edit-birthday" class="col-sm-2 control-label">生日</label>
              <div class="col-sm-10">
                <input type="date" class="form-control" id="edit-birthday" name="birthday" required>
              </div>
            </div>
            <div class="form-group">
              <label for="edit-title" class="col-sm-2 control-label">职位</label>
              <div class="col-sm-10">
                <select name="title" id="edit-title" class="form-control" required>
                  <option value="CEO">CEO</option>
                  <option value="总经理">总经理</option>
                  <option value="副总经理">副总经理</option>
                  <option value="前端开发">前端开发</option>
                  <option value="后端开发">后端开发</option>
                  <option value="测试">测试</option>
                  <option value="市场">市场</option>
                  <option value="运营">运营</option>
                  <option value="DBA">DBA</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="edit-salary" class="col-sm-2 control-label">薪资</label>
              <div class="col-sm-10">
                <input type="number" class="form-control" id="edit-salary" name="salary" required>
              </div>
            </div>
            <div class="form-group">
              <label for="edit-managerId" class="col-sm-2 control-label">领导代号</label>
              <div class="col-sm-10">
                <select name="managerId" id="edit-managerId" class="form-control" required>
                  <option value="1">曹老板</option>
                  <option value="2">王五</option>
                  <option value="4">张丹</option>
                  <option value="5">张无忌</option>
                  <option value="21">武则天</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="edit-deptId" class="col-sm-2 control-label">部门代号</label>
              <div class="col-sm-10">
                <select name="deptId" id="edit-deptId" class="form-control" required>
                  <option value="1">综合管理</option>
                  <option value="2">销售部</option>
                  <option value="3">文艺部</option>
                  <option value="4">研发部</option>
                  <option value="5">市场部</option>
                  <option value="7">维护部</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-6">
                <button type="submit" class="btn btn-primary btn-block">确认修改</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <%--修改头像的模态框--%>
  <div class="modal fade" tabindex="-1" role="dialog" id="editImgModal">
    <div class="modal-dialog" role="document" style="width: 350px">
      <div class="modal-content">
        <div class="modal-header" style="background:#499ced; color: #fff">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title text-center">头像修改</h4>
        </div>
        <div class="modal-body">
          <%--头像的预览--%>
          <div class="row" style="margin-bottom: 20px">
            <div class="col-md-1 col-md-offset-4" id="showbox"></div>
          </div>
          <%--上传头像--%>
          <div class="row">
            <form action="updateImage" method="post" class="form-horizontal" enctype="multipart/form-data">
              <input type="hidden" name="imgid" id="image-id">

              <div class="form-group">
                <label for="image-name" class="control-label col-md-2 col-md-offset-1">姓名</label>
                <div class="col-md-8">
                  <input type="text" id="image-name" name="ename" class="form-control" readonly>
                </div>
              </div>
              <div class="form-group">
                <label for="myHead" class="control-label col-md-2 col-md-offset-1">头像</label>
                <div class="col-md-8">
                  <input type="file" id="myHead" name="myFile" class="form-control" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <button type="submit" class="btn  btn-primary btn-block">确认修改</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  </body>
</html>
